import React from "react"
import {Table,Tag} from "antd"
import {tools} from "utils"
const ContainerList = ({container,rowSelection,getTagColor,getPortList})=>{
  const columns = [{
    title: 'ID',
    dataIndex: 'Id',
    key:'Id',
    render: (text,record) => (
      <span >{text.substr(0,20)}</span>
    ),
  }, {
    title: 'Name',
    dataIndex: 'Name',
    key:'Name',
    render:(text,record)=>(
      <span>{text.length?text.substr(1):record.Name}</span>
    )
  },
    {
      title: 'IP',
      dataIndex: 'NetworkSettings.IPAddress',
      key:'ip',
      render: (text,record) => (
        <span>{text}</span>
      ),
    },
    {
      title: 'Port',
      dataIndex: 'HostConfig.PortBindings',
      key:'port',
      render:(text,record)=>(
        <div>
          {getPortList(text)}
        </div>
      )
    },
    {
      title: 'Image',
      dataIndex: 'Config.Image',
      key:'Image',
    },
    {
      title: 'Cmd',
      dataIndex: 'Config.Cmd',
      key:'Cmd',
    },
    {
      title: 'State',
      dataIndex: 'State',
      key:'State',
      render:(text,record)=>(
          <Tag color={getTagColor(record.State.Status)}>{record.State.Status}</Tag>
      )
    },
    {
      title: 'Created',
      dataIndex: 'Created',
      key:'created',
    }
  ];
  const dataSource = container.container.map((item)=>{
    return {...item,key:item.Id}
  });
  return(
    <div>
      <Table bordered columns={columns} dataSource={dataSource} rowSelection={rowSelection} loading={container.tableLoading}  />
    </div>
  )
};
export default ContainerList
